<template>
  <n-config-provider :theme="settingsStore.currentTheme">
    <n-layout class="layout" has-sider>
      <!-- 侧边栏 -->
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed="collapsed"
        :width="240"
        :collapsed-width="64"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
        class="sider"
      >
        <div class="logo">
          <n-icon size="24">
            <Settings />
          </n-icon>
          <h1 v-if="!collapsed">后台管理系统</h1>
        </div>
        <n-menu
          v-model:value="activeKey"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update:value="handleMenuSelect"
        />
      </n-layout-sider>

      <!-- 主要内容区域 -->
      <n-layout>
        <!-- 头部 -->
        <n-layout-header bordered class="header">
          <div class="header-left">
            <n-button quaternary @click="collapsed = !collapsed">
              <template #icon>
                <n-icon size="20"><MenuOutline /></n-icon>
              </template>
            </n-button>
            <n-breadcrumb>
              <n-breadcrumb-item>首页</n-breadcrumb-item>
              <n-breadcrumb-item v-if="currentRoute.meta.title">{{ currentRoute.meta.title }}</n-breadcrumb-item>
            </n-breadcrumb>
          </div>
          <div class="header-right">
            <n-dropdown :options="userOptions" @select="handleUserSelect">
              <n-button quaternary>
                <template #icon>
                  <n-icon><PersonCircleOutline /></n-icon>
                </template>
                <span v-if="!collapsed">管理员</span>
              </n-button>
            </n-dropdown>
          </div>
        </n-layout-header>

        <!-- 内容区域 -->
        <n-layout-content class="content">
          <n-card class="content-card">
            <router-view />
          </n-card>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-config-provider>
</template>

<script setup>
import { ref, computed, h } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useSettingsStore } from '../stores/settings';
import { 
  NConfigProvider, 
  NLayout, 
  NLayoutSider, 
  NLayoutHeader, 
  NLayoutContent,
  NMenu, 
  NIcon,
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NDropdown,
  NCard
} from 'naive-ui';
import { 
  HomeOutline, 
  PeopleOutline, 
  ServerOutline, 
  CodeWorkingOutline,
  BusinessOutline,
  DocumentTextOutline,
  MenuOutline,
  PersonCircleOutline,
  Settings
} from '@vicons/ionicons5';

const router = useRouter();
const route = useRoute();
const collapsed = ref(false);
const activeKey = ref(route.name);
const settingsStore = useSettingsStore();

const currentRoute = computed(() => route);

// 渲染图标
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

// 侧边栏菜单
const menuOptions = [
  {
    label: '首页',
    key: 'home',
    icon: renderIcon(HomeOutline),
  },
  {
    label: '用户管理',
    key: 'user',
    icon: renderIcon(PeopleOutline),
  },
  {
    label: '设备管理',
    key: 'equipment',
    icon: renderIcon(ServerOutline),
  },
  {
    label: '命令管理',
    key: 'command',
    icon: renderIcon(CodeWorkingOutline),
  },
  {
    label: '公司管理',
    key: 'company',
    icon: renderIcon(BusinessOutline),
  },
  {
    label: '协议管理',
    key: 'agreement',
    icon: renderIcon(DocumentTextOutline),
  }
];

// 用户下拉菜单
const userOptions = [
  {
    label: '个人设置',
    key: 'settings',
  },
  {
    label: '退出登录',
    key: 'logout',
  }
];

// 处理菜单选择
const handleMenuSelect = (key) => {
  router.push({ name: key });
};

// 处理用户菜单选择
const handleUserSelect = (key) => {
  if (key === 'logout') {
    localStorage.removeItem('token');
    router.push('/login');
  } else if (key === 'settings') {
    router.push({ name: 'settings' });
  }
};
</script>

<style scoped>
.layout {
  height: 100vh;
  width: 100vw;
}

.sider {
  /* 移除硬编码的背景色，使用主题的颜色 */
}

.logo {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.logo h1 {
  /* 使用主题颜色，而不是硬编码的白色 */
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
}

.header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content {
  padding: 16px;
  height: calc(100vh - 64px);
  overflow: auto;
}

.content-card {
  height: 100%;
}
</style> 